<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <script>
            !function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);
        </script>
        <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
        }
        body{
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            height: 100%;
            /*width: 100%;*/
            flex-flow:column nowrap;
            -webkit-flex-flow:column nowrap;
        }
        .header{
            /*width: 100%;*/
            height: .8rem;
            background-color: #0cf;
        }
        .main{
            height: 3.5rem;
            background-color: #fc0;
        }
        .df{
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
        }
        .f1{
            flex:1;
            -webkit-flex:1;
        }
        .footer{
            background-color: #c0f;
        }
        .container{
            height: auto;
            flex-shrink:0;
            background-color: blue;
        }
        .container1{
            height: auto;
            flex-shrink:0;
            flex-basis:100%;
            background-color: blue;
        }
        .container2{
            height: auto;
            flex-shrink:0;
            flex-grow:1;
            background-color: blue;
        }
        .container2-fix{
            height: auto;
            /*flex-shrink:0;
            flex-grow:1;*/
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            flex:1;
            -webkit-flex:1;
            /*flex:1 1 100%;
            -webkit-flex:1 1 100%;*/
            background-color: blue;
        }
        .container3-fix{
            /*height: auto;*/
            /*flex-shrink:0;
            flex-grow:1;*/
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            flex:1;
            -webkit-flex:1;
            /*flex:1 1 100%;
            -webkit-flex:1 1 100%;*/
            background-color: blue;
        }
        .box{
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            flex:1 1 0;
            background-color: red;
        }
        .box1{
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            height: 100%;
            flex:1 1 0;
            background-color: red;
        }
        .box2-bug{
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            height: 100%;
            width: 100%;
            flex:1;
            /*flex:1 1 100%;
            -webkit-flex:1 1 100%;*/
            background-color: red;
        }
        .box2-fix{
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            /*height: 100%;
            width: 100%;*/
            flex:1;
            /*flex:1 1 100%;
            -webkit-flex:1 1 100%;*/
            background-color: red;
        }
        </style>
    </head>
    <body>
        <div class="header">header</div>
        <div class="main">main</div>
        <div class="footer df f1">
            <div class="container3-bug">
                <div class="box2-fix">121</div>
            </div>
        </div>
    </body>
</html>